<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 样 式 文 件 -->
  <link rel="stylesheet" th:href="@{/component/pear/css/pear.css}">
  <link rel="stylesheet" th:href="@{/admin/css/other/register.css}">
  <!-- 资 源 引 入 -->
  <script th:src="@{/component/layui/layui.js}"></script>
  <script th:src="@{/component/pear/pear.js}"></script>
  <!--    用于ajax-->
  <script th:src="@{/js/jquery.js}"></script>
  <title>找回密码</title>
  <style>
    .layadmin-user-jump-change {
      float: right;
    }
    .layadmin-link {
      color: #029789!important;
    }
    .layadmin-user-login-other>* {
      display: inline-block;
      vertical-align: middle;
      margin-right: 10px;
      font-size: 14px;
    }
    .layui-tab .layui-tab-title li {
      position: relative;
      line-height: 40px;
      min-width: 65px;
      margin: 0;
      padding: 0px 43px;
      text-align: center;
      cursor: pointer;
    }
    .error{
      color: red;
      display: none;
    }
  </style>
</head>
<body th:background="@{/admin/images/background.svg}" style="background-size: cover;">
<form class="layui-form" id="phoneRetrieve" lay-filter="phoneRetrieve">
  <div class="layui-form-item">
    <img class="logo" th:src="@{/admin/images/logo.png}" />
    <div class="title">Wang Xue</div>
    <div class="desc">
      你 若 不 离 开，便 是 我 的 终 点。
    </div>
  </div>
  <h2>重置密码</h2>
  <p style="font-size: 12px">短信验证码已成功发送 <span id="getPhone" style="color: red;" th:text="${phone}"></span>，请注意查收</p>
  <div class="layui-form-item">
    <input placeholder="请输入手机验证码" id="phone" name="phone" lay-verify="required" hover class="layui-input"  />
    <span class="error" id="phoneNull">验证码不能为空</span>
    <span class="error" id="phoneError">验证码错误</span>
  </div>
  <div class="layui-form-item">
    <input placeholder="请输入新密码" type="password" id="password" name="password" lay-verify="required" hover class="layui-input"  />
    <span class="error" id="passwordError">密码必须以字母开头，长度在6~16之间<br/>只能包含字符、数字和下划线</span>
    <span class="error" id="passwordNull">密码不能为空</span>
  </div>
  <div class="layui-form-item">
    <input placeholder="请确认新密码" type="password" id="rePassword" name="rePassword" lay-verify="required" hover class="layui-input"  />
    <span class="error" id="rePasswordError">密码不一致</span>
    <span class="error" id="rePasswordNull">确认密码不能为空</span>
  </div>
  <div class="layui-form-item">
    <button type="submit" lay-filter="phoneRetrieve" class="pear-btn pear-btn-success">提交</button>
    <p><a href="retrieve" class="layadmin-user-jump-change layadmin-link" style="margin-top: 5px">修改电话号码</a></p>
  </div>
</form>

<!--获取焦点-->
<script>
  window.onload = function() {
    var inputElement = document.getElementById("phone");
    inputElement.focus();
  }
</script>

<script type="text/javascript" th:inline="javascript">
  // thymeleaf 获取当前项目路径
  /*<![CDATA[*/
  const ctx = /*[[@{/}]]*/;
  /*]]>*/
  // 当前窗口 不是最外层窗口
  if (window != window.top){
    // 父窗口 window.parent，最外层窗口 window.top
    window.top.location.href = ctx;
  }
</script>

<script>
  layui.use(['form', 'layer'], function() {
    var form = layui.form;
    var layer = layui.layer;

    var script = document.createElement('script');
    script.src = "/js/jsencrypt.min.js";

    var respPublicKey;
    $(document).ready(function() {
      document.body.appendChild(script);
      $.ajax({
        url: '/public-key', // 发起GET请求到/public-key端点
        type: 'GET',
        success: function (publicKey) {
          // 在请求成功时，publicKey参数将包含后端返回的公钥字符串
          console.log('Received public key:', publicKey);
          respPublicKey = publicKey; // 将公钥存储在全局变量中
        },
        error: function () {
          // 在请求失败时的处理逻辑
          console.error('Failed to retrieve public key');
        }
      });
      $('#phoneRetrieve').on('submit', function (event) {
        event.preventDefault();// 阻止表单默认提交事件
        var phone1 = document.getElementById("getPhone").innerText;
        var phone = $('#phone').val();// 手机号
        var password = $('#password').val();// 密码
        var rePassword = $('#rePassword').val();// 确认密码

        var encrypt = new JSEncrypt();
        encrypt.setPublicKey(respPublicKey);
        var encryptPassword = encrypt.encrypt(password);
        var encryptRePassword = encrypt.encrypt(rePassword);

        $.ajax({
          url: '/phoneRetrieve',
          type: 'POST',
          data: {
            phone: "+86" + phone1,
            verificationCode: phone,
            password: encryptPassword,
            rePassword: encryptRePassword
          },
          success: function (response) {
            // 提交成功的处理逻辑
            // 处理后端返回的结果
            console.log(response);
            if (response.code === 200) {
              window.location.href = ctx + response.data;
            } else {
              if (response.code === 500) {
                console.log(response.msg);
                document.getElementById("msg").innerHTML = response.msg;
              } else if (response.code === 501) {
                console.log(response.msg);
                document.getElementById("vercodeError").style.display = 'inline';
                document.getElementById("vercode").focus();
              } else {
                window.location.href = ctx + "util/500";
              }
            }
          }, error: function (error) {
            console.log(error);
            window.location.href = ctx + "util/500";
          }
        });
        return false;
      });
    });

    //监听验证码输入框的失去焦点事件
    $('#phone').on('input', function () {
      if (this.value != null || this.value !== "") {
        $('#phoneNull').hide();// 显示错误提示
      } else {
        $('#phoneNull').show();// 隐藏错误提示
      }
    })
    document.getElementById('phone').addEventListener('blur', function () {
      var phoneNull = document.getElementById('phoneNull');
      if (this.value == null || this.value === "") {
        phoneNull.style.display = 'inline';
      } else {
        phoneNull.style.display = 'none';
      }
    });

    // 监听密码输入框的失去焦点事件
    $('#password').on('input', function () {
      var password = $(this).val();
      var passwordReg = /^[a-zA-Z]\w{5,15}$/; // 密码正则表达式,以字母开头，长度在6~16之间，只能包含字符、数字和下划线
      // 验证密码格式是否正确
      if (passwordReg.test(password)) {
        $('#passwordError').hide(); // 隐藏错误提示
        $('#passwordNull').hide();// 隐藏空提示
      } else {
        $('#passwordError').show(); // 显示错误提示
        $('#passwordNull').hide();
      }
    })
    document.getElementById('password').addEventListener('blur', function () {
      var passwordNull = document.getElementById('passwordNull');
      var passwordError = document.getElementById('passwordError');
      if (this.value == null || this.value === "") {
        passwordNull.style.display = 'inline';
        passwordError.style.display = 'none';
      } else {
        passwordNull.style.display = 'none';
      }
    });

    //监听确定密码输入框的失去焦点事件
    $('#rePassword').on('input', function () {
      var rePassword = $(this).val();
      var password = document.getElementById('password').value;
      if (rePassword !== password) {
        $('#rePasswordError').show();// 显示错误提示
        $('#rePasswordNull').hide();// 隐藏空提示
      } else {
        $('#rePasswordError').hide();// 隐藏错误提示
        $('#rePasswordNull').hide();// 隐藏空提示
      }
    });
    document.getElementById('rePassword').addEventListener('blur', function () {
      var rePasswordError = document.getElementById('rePasswordError');
      var rePasswordNull = document.getElementById('rePasswordNull');
      if (this.value == null || this.value === "") {
        rePasswordNull.style.display = 'inline';
        rePasswordError.style.display = 'none';
      } else {
        rePasswordError.style.display = 'none';
        rePasswordNull.style.display = 'none';
      }
    });

    // 当表单提交按钮被点击时
    document.querySelector('button[lay-filter="phoneRetrieve"]').addEventListener('click', function () {
      //检查其他输入框是否为空
      if (document.getElementById('phone').value == null || document.getElementById('phone').value === "") {
        // 如果用户名、密码、确认密码输入框为空，显示提示框
        document.getElementById('phoneNull').style.display = 'inline';
        return false;
      } else {
        document.getElementById('phoneNull').style.display = 'none';
        return true;
      }
      if (document.getElementById('password').value === '' || document.getElementById('password').value == null) {
        document.getElementById('passwordNull').style.display = 'inline';
      }else {
        document.getElementById('passwordNull').style.display = 'none';
      }
      if (document.getElementById('rePassword').value === '' || document.getElementById('rePassword').value == null){
        document.getElementById('rePasswordNull').style.display = 'inline';
      }else {
        document.getElementById('rePasswordNull').style.display = 'none';
      }
    })
  });
</script>

</body>
</html>
